<template>
  <Card class="method-management">
    <p class="filter-board clearfix">
      <Button class="add-btn" type="primary" @click="addMethod">新建</Button>
    </p>
    <!-- 方法集 -->
    <Table
      class="method-agg-table"
      :columns="methodsColumns"
      :data="methodsTableData"
      :no-data-text="methodsNodata"
      ></Table>

    <div class="page-box">
      <Select
        @on-change="() => getMethodsTableData()"
        v-model="pageSize"
        class="page-box-size">
        <Option v-for="item in pageSizeList" :key="item" :value="item" :label="`${item}条/页`">
          {{item}}条
        </Option>
      </Select>
      <Page
        show-elevator
        show-total
        :current="page"
        :total="pageTotal"
        :page-size="pageSize"
        class="page-box-page"
        @on-change="(number) => getMethodsTableData(number)"></Page>
    </div>
    <!-- 新建modal框 -->
    <Modal
      class="add-base-modal"
      v-model="methodModalShow"
      title="新增方法"
      :mask-closable="false"
      :transfer="false"
      >
        <!-- 新建方法集基本信息 -->
        <Form
          v-if="currentIndex === 0"
          class="base-form"
          ref="baseInfoForm"
          :model="baseInfoForm"
          :rules="baseInfoFormRules"
          label-position="left"
          :label-width="100"
          >
          <FormItem label="方法编码" prop="resCode">
            <Input v-model="baseInfoForm.resCode" placeholder="请输入方法编码"></Input>
          </FormItem>
          <FormItem label="方法名称" prop="resName">
            <Input v-model="baseInfoForm.resName" placeholder="请输入方法名称"></Input>
          </FormItem>
          <FormItem label="描述" prop="resDesc">
            <Input type="textarea" :rows="2" v-model="baseInfoForm.resDesc" placeholder="请输入描述"></Input>
          </FormItem>
        </Form>
        <!-- 获取方法content -->
        <div v-if="currentIndex === 1" style="margin-top: -16px">
          <Tabs v-model="currentTabs">
            <TabPane class="maven-tab" label="maven拉取" name="maven">
              <Form
                class="maven-form"
                ref="mavenForm"
                :model="mavenForm"
                :rules="mavenFormRules"
                label-position="left"
                :label-width="100"
                >
                <FormItem label="artifactId" prop="artifactId">
                  <Input v-model="mavenForm.artifactId" placeholder="请输入artifactId"></Input>
                </FormItem>
                <FormItem label="groupId" prop="groupId">
                  <Input v-model="mavenForm.groupId" placeholder="groupId"></Input>
                </FormItem><FormItem label="version" prop="version">
                  <Input v-model="mavenForm.version" placeholder="请输入version"></Input>
                </FormItem>
              </Form>
            </TabPane>
            <TabPane class="upload-tab" label="上传" name="upload">
              <Upload
                multiple
                type="drag"
                action=""
                :before-upload="getUploadData">
                <div style="padding: 80px 0">
                  <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                  <p>将文件拖拽至此处或点击上传</p>
                </div>
              </Upload>
              <p style="text-align: center">仅支持上传.excel文件，且文件不超过10MB，<a>样例下载</a></p>
            </TabPane>
          </Tabs>
        </div>
        <!-- 返回的方法信息 -->
        <div class="method-content" v-if="currentIndex === 2">
          <Table
            class="method-content-table"
            :columns="methodContentColumns"
            :data="methodContentTableData"
            :no-data-text="methodContentNoData"
            ></Table>
        </div>
        <div slot="footer">
          <Button v-if="currentIndex === 0" @click="handleBaseInfoCancel">取消</Button>
          <Button v-if="currentIndex === 0" type="primary" @click="handleBaseInfoNext">下一步</Button>
          <Button v-if="currentIndex === 1" @click="handleContentPrevous">上一步</Button>
          <Button v-if="currentIndex === 1" type="primary" @click="handleContentNext">下一步</Button>
          <Button v-if="currentIndex === 2" @click="handleAbstractPrevous">上一步</Button>
          <Button v-if="currentIndex === 2" type="primary" @click="handleAbstractOk">确定</Button>
        </div>
      </Modal>
  </Card>
</template>

<script>
import { queryMethodJarPageApi, getMethodJarContentByFileApi } from '@/api/method-management'
export default {
  name: 'method_management',
  data () {
    return {
      methodsColumns: [],
      methodsTableData: [],
      methodsNodata: '加载中...',

      // 分页相关
      page: 1,
      pageSize: 40,
      pageTotal: 0,
      pageSizeList: [10, 20, 30, 40],

      // 基本信息modal框相关
      methodModalShow: false,
      currentIndex: 0,
      // 方法集基本信息表单
      baseInfoForm: {
        resCode: '',
        resName: '',
        resDesc: '',
        resType: 'method'
      },
      baseInfoFormRules: {
        resCode: [{
          required: true,
          message: '方法编码不能为空',
          trigger: 'blur'
        }],
        resName: [{
          required: true,
          message: '方法名称不能为空',
          trigger: 'blur'
        }]
      },
      // maven表单
      currentTabs: 'maven',
      mavenForm: {
        artifactId: '',
        groupId: '',
        version: ''
      },
      mavenFormRules: {
        artifactId: [{
          required: true,
          message: 'artifactId不能为空',
          trigger: 'blur'
        }],
        groupId: [{
          required: true,
          message: 'groupId不能为空',
          trigger: 'blur'
        }],
        version: [{
          required: true,
          message: 'version不能为空',
          trigger: 'blur'
        }]
      },
      file: null,
      // 方法信息列表
      methodContentColumns: [],
      methodContentTableData: [],
      methodContentNoData: '加载中...'
    }
  },
  computed: {
  },
  methods: {
    addMethod () {
      this.methodModalShow = true
    },
    // 设置表头
    setMethodsColumns () {
      this.methodsColumns = [
        {
          key: 'resId',
          title: '方法ID'
        }, {
          key: 'resName',
          title: '方法名称'
        }, {
          key: 'resDesc',
          title: '方法描述'
        }, {
          key: 'createBy',
          title: '创建人'
        }, {
          key: 'createAt',
          title: '创建时间'
        }, {
          key: 'updateBy',
          title: '更新人'
        }, {
          key: 'changeTime',
          title: '更新时间'
        }, {
          key: 'option',
          title: '操作',
          render: (h, { row }) => {
            const Divider = 'Divider'
            return (
              <span>
                <a onClick={ () => this.toDetail(row) }>详情</a>
                <Divider type="vertical" />
                <a onClick={ () => this.updateContent(row) }>更新内容</a>
                <Divider type="vertical" />
                <a style={{ color: 'red' }} onClick={ () => this.handleDelete(row) }>删除</a>
              </span>
            )
          }
        }
      ]
    },
    // 查看详情
    toDetail (row) {

    },
    // 更新内容
    updateContent (row) {

    },
    // 删除
    handleDelete (row) {
      console.log('--row--', row)
    },
    // 获取表格数据
    getMethodsTableData (number) {
      const pageParmas = {
        page: number || this.page,
        size: this.pageSize
      }
      this.methodsTableData = []
      this.methodsNodata = '加载中...'
      queryMethodJarPageApi(pageParmas).then((res) => {
        if (res.data.code === 2000) {
          this.pageTotal = res.data.data.total
          const { data = {} } = res.data || {}
          this.methodsTableData = data.items || []
          this.methodsNodata = data.total ? '' : '未查询到数据'
        } else {
          this.$Message.error({
            content: res.data.msg || '加载失败，请重试',
            duration: 4
          })
        }
      })
    },
    getUploadData (file) {
      this.file = file
    },
    testUpload () {
      const params = {
        jarId: 1
      }
      const formData = new FormData()
      formData.append('file', this.file)
      getMethodJarContentByFileApi(params, formData).then((res) => {
        console.log('----res', res)
      })
    },
    // 方法集基本信息modal取消按钮
    handleBaseInfoCancel () {
      this.methodModalShow = false
    },
    // 方法集基本信息 下一步按钮
    handleBaseInfoNext () {
      this.currentIndex += 1
    },
    // 拉取内容上一步
    handleContentPrevous () {
      this.currentIndex -= 1
    },
    // 拉取内容下一步
    handleContentNext () {
      this.currentIndex += 1
      this.testUpload()
    },
    // 摘要上一步
    handleAbstractPrevous () {
      this.currentIndex -= 1
    },
    // 确定更新
    handleAbstractOk () {

    }
  },
  activated () {
  },
  mounted () {
    this.setMethodsColumns()
    this.getMethodsTableData()
  }
}
</script>

<style lang="less">
  .method-management {
    .filter-board {
      padding-bottom: 16px;
      .add-btn  {
        float: right;
      }
    }
  }
</style>
